<template>
    <el-card shadow="hover" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
      <div class="card-header">
        <slot name="header">
          <div class="title flex align-center" :class="$slots.subTitle?'mt-4':''">
            <slot name="icon">
              <img v-if="showIcon" src="@/assets/dataset/icon_document.svg" style="width: 58%" alt="" />
            </slot>
            <div style="width: 90%; padding-left: 9px;">
              <auto-tooltip :content="title" style="width: 65%; height: 22px">
                {{ title }}
              </auto-tooltip>
              <slot name="subTitle"> </slot>
            </div>
          </div>
        </slot>
      </div>
      <div
        class="description break-all"
        :class="$slots.subTitle ? 'mt-24' : 'mt-12'"
        v-if="$slots.description || description"
      >
        <slot name="description">
          <div class="content">
            {{ description }}
          </div>
        </slot>
      </div>
      <slot />
      <div @mouseenter="subHoveredEnter">
        <slot name="mouseEnter" v-if="$slots.mouseEnter && show" />
      </div>
      <div class="card-footer" v-if="$slots.footer">
        <slot name="footer" />
      </div>
    </el-card>
  </template>
  <script setup lang="ts">
  import { ref } from 'vue'
  import { t } from '@/locales'
  defineOptions({ name: 'CardBoxDataset' })
  const props = withDefaults(
    defineProps<{
      /**
       * 标题
       */
      title?: string
      /**
       * 描述
       */
      description?: string
      /**
       * 是否展示icon
       */
      showIcon?: boolean
    }>(),
    { title: t('common.title'), description: '', showIcon: true, border: true }
  )
  
  const show = ref(false)
  // card上面存在dropdown菜单
  const subHovered = ref(false)
  function cardEnter() {
    show.value = true
    subHovered.value = false
  }
  
  function cardLeave() {
    show.value = subHovered.value
  }
  
  function subHoveredEnter() {
    subHovered.value = true
  }
  </script>
  <style lang="scss" scoped>
  .card-box{
    transition: all 0.3s ease-in-out;
    border: none;
    box-shadow: 0px 0px 10px -3px #DADDE7;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    min-height: var(--card-min-height);
    min-width: var(--card-min-width);
    border-radius: 8px;
    .title {
      height: 20px;
  
    }
    .description {
      color: var(--app-text-color-secondary);
      line-height: 20px;
      font-weight: 400;
      .content {
        display: -webkit-box;
        height: var(--app-card-box-description-height, 40px);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 13px;
        color: #8C8C8C;
      }
    }
  
    .card-footer {
      position: absolute;
      bottom: 8px;
      left: 0;
      min-height: 30px;
      color: var(--app-text-color-secondary);
      font-weight: 400;
      padding: 0 16px;
      width: 100%;
      box-sizing: border-box;
    }
  }

  .card-box.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
        box-shadow: 0px 0px 10px -3px #DADDE7;
        background-color: var(--app-layout-bg-color);
   }
  </style>
  